<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// 动态导入图像
const images = import.meta.glob('@/assets/images/*.{jpg,png,jpeg,gif}');

let bannerlist = ref([
  { id: 1, img_url: 'banner1.jpg' },
  { id: 2, img_url: 'banner2.jpg' },
  { id: 3, img_url: 'banner3.jpg' },
  { id: 4, img_url: 'banner4.jpg' },
]);

const imageSrcList = ref({}); // 用于存储加载的图像路径

// 在组件挂载后加载图像
onMounted(async () => {
  for (const item of bannerlist.value) {
    const imageModule = images[`/src/assets/images/${item.img_url}`];
    if (imageModule) {
      const module = await imageModule();
      imageSrcList.value[item.id] = module.default; // 存储图像的默认导出
    }
  }
});
</script>

<template>
  <div class="Banner">
    <el-carousel height="500px">
      <router-link to="/serviceDetail">
      <el-carousel-item v-for="item in bannerlist" :key="item.id">
        <img :src="imageSrcList[item.id]" alt="" />
      </el-carousel-item>
      </router-link>
    </el-carousel>
  </div>
</template>

<style scoped>
.Banner img {
  width: 80%;
  height: 100%;
  object-fit: cover;
  top: 0;
}
.Banner img img{
  width: 80%;
}
</style>
